<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>新闻通知</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">
    <link rel="stylesheet" href="../css/hsg.css">
    <link href="../css/quill.snow.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
        .ql-snow .ql-editor img {
            width: 400px;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <div >
        <div style="padding: 0 20px">
            <div>
                <div style="color: #666; font-weight: bold; border-bottom: 1px solid #ccc; padding: 10px 0; margin-bottom: 20px; font-size: 30px;">新闻通知</div>
            </div>
            <div style="margin-top: 10px">
                <div style="border: 1px solid #ff6b31;">
                    <div style="padding: 5px; border-bottom: 1px solid #ff6b31; color: white; background-color: #ff6b31;">新闻通知表</div>
                    <div style="border: 1px solid #ccc; padding: 10px">
                        <div class="table-responsive">
                            <div class="nx-table-header" style="position: relative">
                                <button class="btn btn-sm btn-primary" v-on:click="add()">新增</button>
                                <button class="btn btn-sm btn-primary">批量导入</button>
                                <input @click="clickUpload" @change="upload" type="file" multiple ref="file"
                                       style="position:absolute;top:0;left:50px;opacity:0;width:70px;height:30px;">
                                <button class="btn btn-sm btn-primary" v-on:click="downModel">下载模板</button>
                                <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                <i class="glyphicon glyphicon-search" style="margin-left: -20px"></i>
                            </div>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th><th>类别</th><th>首页图片</th><th>点击率</th><th>发布人</th><th>点赞(顶)</th><th>点赞(踩)</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody v-for="obj in objs">
                                <tr>
                                    <td>{{obj.id}}</td>
                                    <td>{{obj.biaoti}}</td><td>{{obj.leibie}}</td><td><img v-if="obj.shouyetupianavt" :src="'/files/download/'+obj.shouyetupianavt" class="avatar-table"><img v-else src="../img/no-avater.jpg" class="avatar-table"></td><td>{{obj.dianjilv}}</td><td>{{obj.faburen}}</td><td>{{obj.dianzan_d}}</td><td>{{obj.dianzan_c}}</td>
                                    <td>
                                        <button class="btn btn-primary btn-xs" @click="init(obj)">编辑</button>
                                        <button class="btn btn-primary btn-xs" @click="write(obj)">编辑详细内容</button>
                                        <button class="btn btn-primary btn-xs" @click="detail(obj.id)">详细</button>
                                        <button class="btn btn-danger btn-xs" @click="del(obj.id)">删除</button>                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!--danhxexiaxnshi-->
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item" v-bind:class="{ disabled: preActive }">
                                        <a class="page-link" href="javascript:void(0)"
                                           v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                    </li>
                                    <li class="page-item disabled">
                                        <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" v-on:click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                    </li>
                                    <li class="page-item" v-bind:class="{ disabled: nextActive }">
                                        <a class="page-link" href="javascript:void(0)" v-on:click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" id="mod">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="id" name="id" v-model="entity.id">
                        <div  class="form-group"><label class="col-sm-3 control-label">标题</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.biaoti" placeholder="请输入标题" id="biaoti"></div></div>
                        <div  class="form-group"><label class="col-sm-3 control-label">类别</label><div class="col-sm-7"><select class="form-control" v-model="entity.leibie"><option value="竞赛公告">竞赛公告</option></select></div></div>
                        <div  class="form-group"><label class="col-sm-3 control-label">首页图片</label> <div class="col-sm-7"> <el-upload  class="avatar-uploader" action="/files/upload"  :show-file-list="false"  :on-success="shouyetupiansccs"   :before-upload="shouyetupianbaul"> <img v-if="shouyetupianimrl" :src="shouyetupianimrl" class="avatar"><img v-else-if="shouyetupianavt" :src="'/files/download/'+shouyetupianavt" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload> </div></div>
                        <div  class="form-group"><label class="col-sm-3 control-label">摘要</label><div class="col-sm-7"><textarea type="text" class="form-control" v-model="entity.zhaiyao" style="height: 100px" placeholder="请输入摘要" id="zhaiyao"></textarea></div></div>
                        <div  class="form-group"><label class="col-sm-3 control-label">点击率</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.dianjilv" style="width: 160px" placeholder="请输入点击率" id="dianjilv"></div></div>
                        <div  class="form-group"><label class="col-sm-3 control-label">发布人</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.faburen" style="width: 160px" placeholder="请输入发布人" id="faburen" disabled></div></div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="update()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--m_liangbumod-->
</div>
<div class="modal" tabindex="-1" role="dialog" id="mod2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">请填写信息</span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <input type="hidden" id="xinwenId" name="id" v-model="entity.id">
                    <div  class="form-group"><label class="col-sm-3 control-label">内容</label><div class="col-sm-7">
                        <div id="editor" style="min-height: 300px"></div></div></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="writeButton">保存</button>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>
<script src="../js/quill.js"></script>

<script>
    function checkValid(entity) {
        if (!entity.biaoti || entity.biaoti === "") {alert("标题不能为空"); return false;}
        if (!entity.leibie || entity.leibie === "") {alert("类别不能为空"); return false;}
        if (entity.dianjilv && entity.dianjilv !== ""){let reg = /^[0-9]+.?[0-9]*$/; if (!reg.test(entity.dianjilv)) {alert("点击率必需数字型");return false;}}
        return true;
    }
    let quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: {
                container: [
                    [{'header': [1, 2, 3, 4, 5, 6, false]}],        // 标题字体
                    [{'font': []}],                                 // 字体
                    ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
                    [{'align': []}],                                // 对齐方式
                    ['blockquote', 'code-block'],                     // 文本块/代码块
                    [{'header': 1}, {'header': 2}],               // 用户自定义按钮值
                    [{'list': 'ordered'}, {'list': 'bullet'}],     // 有序/无序列表
                    [{'indent': '-1'}, {'indent': '+1'}],          // 减少缩进/缩进
                    [{'color': []}, {'background': []}],          // 主题默认下拉，使用主题提供的值
                    ['clean'],                                        // 清除格式
                    ['image', 'link', 'video']                        // 图片 / 链接 / 视频
                ]
            }

        }
    });
    let wrapper = new Vue({
        el: '#wrapper',
        data: {

            authority: [],
            permission: [],
            storeUser: JSON.parse(localStorage.getItem("user")),
            name: '',
            user: {},

            shouyetupianimrl: '',
//youtupianimrl
            objs: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
            shouyetupianavt:null,
            modalData: {},
            //youxia2sui
            //youxxiabiaoxduan
            entity: {
                shouyetupianflst:[],

            }

        },
        created:
            function () {
                this.loadTable(1);
                this.user = JSON.parse(localStorage.getItem('user'));
                axios.get("/permission/3").then(res => {
                    if (res.data.code === '0') {
                        this.permission = res.data.data;
                    } else {
                        msg('error', res.data.msg);
                    }
                });
                axios.get("/authority").then(res => {
                    if (res.data.code === '0') {
                        this.authority = res.data.data;
                    } else {
                        msg('error', res.data.msg);
                    }
                });
                //youcreatexia2sui
                //youffxiaxbiaoxduan
                //if (this.user.level === "管理员"){this.entity.faburen = this.user.username;}
                //youtixing
            },
        methods: {
            loadTable(pageNum) {
                let name = this.name === '' ? "all" : this.name;
                axios.get("/xinwentongzhiInfo/page/" + name + "?pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.objs = res.data.data.list;
                        res.data.data.list.forEach(item=>{
                            if(item.shouyetupian) {item.shouyetupianavt = JSON.parse(item.shouyetupian)[0];}
                            //tupianloadtb
                            //dhjsuanxx
                        })
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                        if (this.user.level === "管理员"){this.entity.faburen = this.user.username;}
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },

            detail(id) {window.open("/front/xinwentongzhidetail.html?xinwentongzhiid="+id);},
            init(o) {
                //if (this.user.level === "管理员")
//                {}
//                else
//                {
//                    msg('warning', '你没有权限操作');
//                    return;
//                }
                this.entity.shouyetupianflst = [];

                this.shouyetupianavt=null;

                this.shouyetupianimrl=null;

                this.entity = JSON.parse(JSON.stringify(o));
                if(this.entity.shouyetupian) { this.shouyetupianavt = JSON.parse(this.entity.shouyetupian)[0];}
                //tupianxinxiit4
                quill.root.innerHTML = o.neirong;

                $('#mod').modal('show');
            },
            //m_liangbuinit
            add() {
                quill.root.innerHTML = '';
                this.entity.shouyetupianflst = [];

                this.shouyetupianavt=null;

                this.shouyetupianimrl=null;

                $('#mod').modal('show');
            },
            write(data){
                $("#xinwenId").val(data.id)
                quill.root.innerHTML = data.neirong;
                $("#mod2").modal('show')
            },
            update() {
                if (checkValid(this.entity)) {
                    this.entity.neirong = quill.root.innerHTML;
                    if (!this.entity.id) {
                        axios.post(
                            "/xinwentongzhiInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '添加成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    } else {
                        axios.put(
                            "/xinwentongzhiInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '更新成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    }
                }
            },
            shouyetupiansccs(res, file) {
                this.shouyetupianimrl = URL.createObjectURL(file.raw);
                this.entity.shouyetupianflst.push(res.data.id);
                this.shouyetupianavt = res.data.id
            },
            shouyetupianbaul(file) {
                this.entity.shouyetupianflst = [];
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2000MB!');
                }
                return isJPG && isLt2M;
            },
            //m_tupiansccsbaul
            del(id) {
                //if (this.user.level === "管理员")
//                {}
//                else
//                {
//                    msg('warning', '你没有权限操作');
//                    return;
//                }
                let _this = this;
                this.$confirm('确认删除？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.delete("/xinwentongzhiInfo/" + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '删除成功');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            downModel() {
                location.href = '/xinwentongzhiInfo/getExcelModel';
            },
            clickUpload: function (e) {
                if (this.user.level === "管理员")
                {}
                else
                {
                    msg('warning', '你没有权限操作');
                    return;
                }
            },
            upload: function () {
                let files = this.$refs.file.files;
                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append('file', files[i]);
                    axios.post('/xinwentongzhiInfo/upload', formData, {
                        'Content-Type': 'multipart/form-data'
                    }).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '批量导入成功');
                            this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    })
                }
            },
            //youscwenjian
            changeStatus(id){

                let _this = this;
                axios.get("/xinwentongzhiInfo/changeStatus/" + id).then(res => {
                    if (res.data.code === '0') {
                        msg('success', '状态修改成功');
                        _this.loadTable(this.pageInfo.pageNum);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            //x2suilafuxzhi
            logout() {
                logout();
            }
        }
    })
    $("#writeButton").click(function () {
        let entity = wrapper.$data.entity
        entity.neirong = quill.root.innerHTML
        entity.id = $("#xinwenId").val();
        axios.put(
            "/xinwentongzhiInfo", entity
        ).then(res => {
            if (res.data.code === '0') {
                msg('success', '成功');
                $('#mod2').modal('hide');
                wrapper.loadTable(1);
            } else {
                msg('error', res.data.msg);
            }
        })
    })
</script>
</body>
</html>